<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - 页面未找到</title>
</head>

<style>
    /* 全局样式重置 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* 页面主体背景样式 */
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f5; /* 淡雅的浅紫色调作为背景，营造温馨柔和氛围 */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 80" preserveAspectRatio="none"><path d="M80 0L0 0 0 80 80 80z" fill="none" stroke="%23f8f8f8" stroke-width="1" stroke-opacity="0.3" stroke-dasharray="10, 10" /></svg>');
        background-size: cover;
        background-attachment: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        text-align: center;
    }

    /* 错误信息容器样式 */
    .error-container {
        padding: 40px;
        background-color: #ffffff; /* 纯净的白色容器，简洁大方 */
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 淡淡的投影，增加层次感 */
        width: 100%;
        max-width: 550px;
        transition: all 0.3s ease;
    }

    .error-container:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* 鼠标悬停时加深投影 */
    }

    /* 404 大标题样式 */
    .error-container h1 {
        font-size: 100px;
        color: #FF9800; /* 温暖的橙色，醒目又不失亲和感 */
        margin-bottom: 15px;
        font-weight: bold; /* 加粗字体，凸显重要性 */
    }

    /* 段落文字样式 */
    .error-container p {
        font-size: 18px;
        color: #333333;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    /* 中式传统图案（此处用云纹示意，可替换为更合适的公益相关矢量图或 SVG） */
    .cloud-pattern {
        display: inline-block;
        width: 80px;
        height: 80px;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23E6E6E6" d="M477.9 288c0-8.8-7.2-16-16-16H392c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h69.9c8.8 0 16-7.2 16-16v-32zM336 352c0-8.8-7.2-16-16-16H256c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16v-32zM192 416c0-8.8-7.2-16-16-16H112c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16v-32zM336 192c0-8.8-7.2-16-16-16H256c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16v-32zM477.9 128c0-8.8-7.2-16-16-16H392c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h69.9c8.8 0 16-7.2 16-16v-32zM192 256c0-8.8-7.2-16-16-16H112c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16v-32z"/></svg>');
        background-size: cover;
        margin-bottom: 15px;
    }

    /* 公益引导文字样式 */
    .charity-text {
        font-size: 20px;
        color: #666666;
        margin-bottom: 25px;
    }

    /* 链接样式 */
    .error-container a {
        color: #009688; /* 清新的绿色，代表生机与希望，用于链接颜色 */
        text-decoration: none;
        border-bottom: 2px solid transparent;
        transition: border-bottom-color 0.3s ease;
    }

    .error-container a:hover {
        border-bottom-color: #009688;
    }

    /* 响应式调整 */
    @media (max-width: 480px) {
        .error-container h1 {
            font-size: 80px;
        }

        .error-container p,
        .charity-text {
            font-size: 16px;
        }

        .cloud-pattern {
            width: 60px;
            height: 60px;
        }
    }
</style>

<body>
<div class="error-container">
    <div class="cloud-pattern"></div> <!-- 云纹图案，象征祥瑞，可按需替换为公益图标 -->
    <h1>404</h1>
    <p>很抱歉，您要找的页面好像迷路了。</p>
    <p class="charity-text">不过没关系，爱心之路从不迷失方向。每一次探索都是助力公益的契机，让温暖延续，携手共赴美好。</p>
    <p>请检查网址，或 <a href="/">返回首页</a>。</p>
</div>
</body>

</html>